{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}办公用品表{% endblock %}

{% block css %}

    <!-- DataTables -->
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            办公用品表

        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li class="active">办公用品总表</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">

                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">办公用品总表</h3>


                    </div>


                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="assets_table" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>办公用品名称</th>

                                <th>规格</th>
                                <th>备注</th>
                                <th>操作</th>

                            </tr>
                            </thead>
                            <tbody>

                            {% for article in articles %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td class="text-green text-bold">{{ article.articles_name }}</td>
                                    <td class="text-green text-bold">{{ article.specs }}</td>
                                    <td class="text-green text-bold">{{ article.remarks }}</td>
                                    <td><a href="{% url 'register:add_articles' %}" title="添加"><i
                                            class="glyphicon glyphicon-plus"></i></a>
                                        <a href="{% url 'register:edit_articles' article.id %}" title="修改"><i
                                                class="glyphicon glyphicon-pencil"></i></a>
                                        <a href="{% url 'register:del_articles' article.id %}"
                                           onclick="return delete_data()" title="删除"><i
                                                class="glyphicon glyphicon-trash text-danger"></i></a>


                                    </td>
                                </tr>
                            {% empty %}
                                <tr>没有数据！ <a href="{% url "register:add_articles" %}">点击添加产品</a></tr> </tr>
                            {% endfor %}

                            </tbody>
                            <tfoot>
                            <tr>
                                <th>序号</th>
                                <th>名称</th>

                                <th>规格</th>
                                <th>备注</th>
                                <th>操作</th>

                            </tr>
                            </tfoot>
                        </table>


                    </div>

                    <!-- /.box-body -->
                </div>
                <!-- /.box -->

            </div>
            <!-- /.col -->

        </div>
    
        <!-- /.row -->
    
        <span color="red" style="color: red;font-size: 16px"> {{ message }}</span>

        <form action="{% url 'register:import_articles' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" name="my_file"/>

            <button type="submit">批量导入办公用品</button>

        </form>
        
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>

    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/app.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>

    <!-- DataTable buttons -->
    <script src="{% static  'plugins/datatables/button/dataTables.buttons.min.js' %}"></script>
    <script src="{% static  'plugins/datatables/button/buttons.bootstrap.min.js' %}"></script>
    <!-- buttons 打印功能 -->
    <script src="{% static  'plugins/datatables/button/buttons.print.min.js' %}"></script>
    <!-- buttons 导出功能 -->
    <script src="{% static  'plugins/datatables/button/buttons.html5.min.js' %}"></script>

    <!--jszip.min.js为3.多的版本 无法使用excel 所以重新下载了2.多的 就可以正常使用导出excel -->
    {#    <script src="{% static  'plugins/datatables/button/jszip.min.js' %}"></script>#}
    <script src="{% static  'plugins/datatables/button/jszip.js' %}"></script>
    <!-- buttons 生成PDF功能 -->
    {#    <script src="{% static  'plugins/datatables/button/pdfmake.min.js'%}"></script>#}
    {#    <script src="{% static  'plugins/datatables/button/vfs_fonts.js'%}"></script>#}

    <!-- page script -->
    <script>
        $(function () {
            $('#assets_table').DataTable({
                "paging": true,       <!-- 允许分页 -->
                "lengthChange": true, <!-- 允许改变每页显示的行数 -->
                "searching": true,    <!-- 允许内容搜索 -->
                "ordering": true,     <!-- 允许排序 -->
                "info": true,         <!-- 显示信息 -->
                "autoWidth": false,    <!-- 固定宽度 -->
                language: {
                    'sSearch': "搜索",
                    "info": "显示 _START_ 到 _END_ 页共 _TOTAL_ 条",
                    "infoEmpty": "显示 0 到 0 页共 0 条",
                    "lengthMenu": "显示 _MENU_ 条",
                    "zeroRecords": "没有匹配项",
                    "paginate": {
                        "first": "First",
                        "last": "Last",
                        "next": "下页",
                        "previous": "上页"
                    },
                },
                dom: '<"pull-left"B>ft<"pull-left"i>p',
                buttons: [
                    {
                        text: '<i class="glyphicon glyphicon-copy" title="复制"></i>',
                        extend: 'copy'
                    }, {
                        text: '<i class="glyphicon glyphicon-print" title="打印"></i>',
                        extend: 'print'
                    }, {
                        text: '<i class="glyphicon glyphicon-list-alt" title="导出excel"></i>',
                        extend: 'excelHtml5'
                    },
                ],


                {#"stripeClasses": [ 'strip1', 'strip2', 'strip3' ],#}
                {#columnDefs: [#}
                {#  {#}
                {#        targets: -1,#}
                {#visible: false,#}
                {#        sortable: false,#}
                {#data : null,#}
                {#        render: function(data, type, row){#}
                {#            return '<a href="" title="详情">' +#}
                {#            '<i class="glyphicon glyphicon-eye-open"></i> ' +#}
                {#            '</a>'+#}
                {#            '<a href="/assets/edit/" data-toggle="modal" data-id="' + row.p_id +'" title="修改">' +#}
                {#            '<i class="glyphicon glyphicon-pencil"></i> ' +#}
                {#            '</a>'+#}
                {#            '<a href="#delProject" data-toggle="modal" data-id="' + row.p_id +'" title="删除">' +#}
                {#            '<i class="glyphicon glyphicon-trash text-danger"></i> ' +#}
                {#            '</a>';#}
                {#        }#}
                {#    }#}
                {#],#}


            });
            $.fn.dataTable.ext.buttons.reload = {
                text: '<i class="glyphicon glyphicon-refresh"></i>',
                action: function (e, dt, node, config) {
                    dt.ajax.reload();
                }
            };


        });

    </script>
{% endblock %}